安安，今日來延續昨天的習題，今天要做以下幾點事情：
1.當點選圓圈的時候會有顏色漸變的效果。
2.將標靶上的數字產生出來。
3.設定一個計分板，加總分數。
4.鍵盤事件，用來歸零分數以及變換標靶模式（讓他移動）。

那就開始嚕！

Start!

1.點選圓圈後漸慢變黑色，利用transition time 再加上模式的一個小技巧，點選放開後就能產生漸變～（可看註解1的程式碼）。

2.將數字產生出來，並且置中，會發現數字重疊，需要設置距離top:20px讓數字分開，要注意attr只有在虛擬元素的content才有用。

:before{
    content: attr(data-label);
    @include ab_center;
    top: 20px;
    }

3.在來到html新增.infos，h1與h3，新增分數說明等等。

.infos
  h1.score Score: 0
  h3.explain 重新開始 R , 變換模式 K

4.在到css地方設置.infos樣式，讓他固定在網頁某個位置，並z-index順序:10。

.infos{
  position: fixed;
  left: 50px;
  bottom: 50px;
  z-index: 10;
  h1,h3{
    margin: 0;
  }
  h1{
    font-size: 50px;
  }
  h3{
    opacity: 0.4;
  }

5.來設置js部分，第一部分先設置分數加總，並設置重置分數的函式。

console.clear()
// 設置分數加總
var score = 0
$("[class^=cir]").click(function(evt){
  var num = $(this).attr("data-label")
  console.log(num)
  score+= parseInt(num*10)
  updateGame()
  $('.score').text("Score:"+score)
})
// 重置分數
function updateGame(){
 $('.score').text("Score:"+score)
}
function resetGame(){
  score = 0
  updateGame()
}

6.鍵盤事件，要把成績歸零及箭靶做移動。

當鍵盤按"r"鍵時會呼叫resetGame函式，並歸零。

當鍵盤按"k"鍵時會產生一個class名叫moving。

// 鍵盤事件，把成績歸零
// 這段是來判斷key
$(window).keydown(function(evt){
  console.log(evt.key)
  if(evt.key=="r"){
    resetGame()
  }
  if(evt.key=="k"){
  $('.target').toggleClass('moving')
  }
})

7.當按鍵盤Ｋ時能夠切換模式，要讓標靶做移動，所以回去設置css增加動畫效果。

.target.moving{
  @keyframes moving{
    0%{
      transform: translate(-200px)}
    100%{
      transform: translate(200px)}}
  animation: moving 1s infinite alternate;
}

今日進度的程式碼及效果codepen:https://codepen.io/cinj/pen/bGeGVjX?editors=0101
明天再繼續練習後面的部分～（（先來去充實自己